<!-- *Author: 黄旗, *Date: 2020-08-04 15:45:59 -->
<template>
    <Modal v-model='modal' title="编辑项目" :mask-closable='false' @on-cancel='canceledit(modalname)' width="800">
        <Form :label-width='120' :ref='modalname' :model='modalparams' :rules='createRules'>
            <FormItem label='项目名称：'>
                <p>{{modaltext.project_names}}</p>
            </FormItem>
            <FormItem label='项目域名：' prop='project_domain' style="width:400px">
                <Input v-model="modalparams.project_domain" placeholder="请输入项目域名" clearable />
            </FormItem>
            <FormItem label='所属服务器：' prop='vps_ids'>
                 <Row>
                    <Col :span="8">
                        <Select v-model="modalparams.vps_id"  style="width:200px" placeholder='请先选择站点服务器'>
                            <Option v-for="item in Vpslist" :value="item.id" :key="item.id">{{item.public_ip}} - {{ item.alias_name }}</Option>
                        </Select>
                    </Col>
                    <Col :span="8">
                    <Select v-model="modalparams.db_id"  style="width:200px" placeholder='请先选择数据库服务器'>
                            <Option v-for="item in vpdataList" :value="item.id" :key="item.id">{{item.public_ip}} - {{ item.alias_name }}</Option>
                        </Select>
                    </Col>
                </Row>
            </FormItem>
            <FormItem label='服务状态：'>
                <RadioGroup v-model="modalparams.status">
                    <Radio v-for="item of raidolist" :key="item.value" :label="item.value">{{item.label}}</Radio>
                </RadioGroup>
            </FormItem>
        </Form>
        <div slot='footer'>
            <Button @click='canceledit(modalname)'>取消</Button>
            <Button type='primary' @click='submitedit(modalname)'>保存</Button>
        </div>
    </Modal>
</template>

<script>
    import { vpsvpsvpsprojectupdate } from '@api/projectsetting';
    export default {
        data () {
            return {
                modalname: 'modalname',
                modal: false,
                Vpslist: [],
                vpdataList: [],
                raidolist: [{ value: 1, label: '启用' }, { value: 0, label: '禁用' }],
                modalparams: { project_id: '', status: 1, vps_id: '', db_id: '' },
                modaltext: { project_names: '', alias_name: '', public_ip: '', project_domain: '' },
                createRules: {
                    vps_ids: [{
                        // required: true,
                        message: '请先选择服务器',
                        trigger: 'change'
                    }],
                    project_domain: [{
                        required: true,
                        message: '请先输入项目域名',
                        trigger: 'blur'
                    }]
                }
            }
        },
        props: ['Vpslists'],
        mounted () {
        },
        /* 函数方法集合 */
        methods: {
            /* @函数功能: 初始化 */
            initial (row) {
                this.Vpslist = this.Vpslists
                this.vpdataList = this.Vpslists
                this.modalparams = { id: '', status: 1, vps_id: '', db_id: '', project_domain: '' }
                this.askData(row)
            },
            askData (row) {
                this.modal = true
                this.modalparams = {
                    id: row.id,
                    status: +row.status,
                    vps_id: row.vps_id,
                    db_id: row.db_id,
                    project_domain: row.project_domain
                }
                this.modaltext = {
                    project_names: row.project_names,
                    alias_name: row.alias_name,
                    public_ip: row.public_ip
                }
            },
            canceledit () {
                this.modal = false
            },
            submitedit (name) {
                this.$refs[name].validate((valid) => {
                    if (valid) {
                        vpsvpsvpsprojectupdate(this.modalparams).then(() => {
                            this.$emit('askData')
                            this.$Message.success('编辑成功')
                            this.modal = false
                            this.$refs[name].resetFields();
                        })
                    }
                })
            }
        }
    }
</script>
